<template>
	<view class="funds-status_wrapper">
		<view class="list_wrap" v-if="mineProfitData.count && mineProfitData.count!== 0">
			<view class="list_header">
				<text>数额(PCD)</text>
				<text>收益时间</text>
				<text>矿场算力</text>
			</view>
			<view class="list_content">
				<view class="list_content--item" v-for="(item,index) in mineProfitData.data" :key="index">
					<text>{{$util.roundNumber(item.profit_amount,2)}}</text>
					<text>{{$util.FormatDate(item.create_time,'date')}}</text>
					<text>{{item.profit_rate*100}}%</text>
				</view>
			</view>
		</view>
		<!-- 暂无数据 -->
		<view class="content_null" v-else>暂无数据</view>
		<!-- 分页 -->
		<view class="pagination_wrap" v-if="mineProfitData.count && mineProfitData.count!==0">
			<view class="pagination_left" @click="onPagination('previous')">
				<uni-icon type="back" color="#999999" size="20"></uni-icon>
			</view>
			<view class="pagination_text">{{currentPage + '/' + sumPage}}</view>
			<view class="pagination_right" @click="onPagination('next')">
				<uni-icon type="forward" color="#999999" size="20"></uni-icon>
			</view>
		</view>
		<view class="tips_wrap">
			提示：收益已入账可提资产
		</view>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon/uni-icon.vue";
	export default {
		data() {
			return {
				mineProfitData: {}, // 当前列表数据
				currentPage: 1, // 当前页
				limitPage: 10 // 每页展示条数
			}
		},
		computed: {
			sumPage() {				
				return this.mineProfitData.count ? Math.ceil(this.mineProfitData.count / this.limitPage) : 1
			}
		},
		onReady() {
			this.getMineProfit()
		},
		onPullDownRefresh(){
			this.getMineProfit()
		},
		methods: {
			// 挖矿收益列表
			getMineProfit() {
				this.$api.getMineProfit({
					limit: this.limitPage,
					page: this.currentPage
				}, res => {
					uni.stopPullDownRefresh()
					if (res.data.type === 'ok') {
						this.mineProfitData = res.data.message
					}
				})
			},
			// 分页
			onPagination(arg) {
				if (arg === "previous") {
					if (this.currentPage > 1) {
						this.currentPage--
					} else {
						return
					}
				} else {
					if (this.currentPage < this.sumPage) {
						this.currentPage++
					} else {
						uni.showToast({
							title: '没有更多了',
							icon: 'none'
						})
						return
					}
				}
				this.getMineProfit()
			},
			// 返回
			jumpBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		},
		components: {
			uniIcon
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex-layout {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.funds-status_wrapper {
		height: 100vh;
		background: #FFFFFF;
	}

	.list_wrap {
		color: #333333;

		.list_header {
			@include flex-layout;
			height: 87upx;
			background-color: #EEEEEE;

			text {
				width: 33.33%;
				text-align: center;
			}
		}

		.list_content {
			.list_content--item {
				height: 87upx;
				@include flex-layout;

				text {
					flex: 1;
					text-align: center;
				}
			}
		}
	}

	.content_null{
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.pagination_wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 80%;
		margin: 40upx auto;

		.pagination_left,
		.pagination_right {
			padding: 0 10upx;
			border-radius: 10upx;
			border: 1px solid #BBBBBB;
		}
	}
	.tips_wrap{
		width:80%;
		margin: 40upx auto;
		color:#999999;
		font-size: 10px;
	}
</style>
